<template>
  <div>
    <me-form :records="renderList" ref="arr" @sousuo="add" @isshow="showlist"></me-form>
    <!-- <me-details></me-details> -->
    <MeDetails v-show="flag" :list="list" @closeshow="close"></MeDetails>
  </div>
</template>

<script>
import MeDetails from '@/components/MeDetails.vue'
import MeForm from '@/components/MeForm.vue'

export default {
  data () {
    return {
      records: [
        {
          date: '2022-01-01',
          doctor: '张三',
          diagnosis: '感冒',
          prescription: '感冒药'
        },
        {
          date: '2022-02-01',
          doctor: '李四',
          diagnosis: '头疼',
          prescription: '止疼药'
        },
        {
          date: '2022-03-01',
          doctor: '王五',
          diagnosis: '腰痛',
          prescription: '止痛贴'
        }
      ],
      val: '',
      flag: false,
      list: []
    }
  },
  components: {
    MeDetails,
    MeForm
  },
  methods: {
    add (d) {
      this.val = d
    },
    showlist (val, id) {
      this.flag = val
      // console.log(id)
      this.list = this.records.filter(item => item.doctor === id)
      // console.log(this.list[0].date)
    },
    close (val) {
      this.flag = val
    }
  },
  computed: {
    renderList () {
      return this.val
        ? this.records.filter(item => {
            for (const key in item) {
              if (item[key] === this.val) {
                return true
              }
            }
          })
        : this.records
    }
  }
}
</script>

<style></style>
